<script setup>
const arr = [
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月12日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月11日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月10日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月9日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月8日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月7日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月6日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月5日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
]
const toNext = (to) => {
  uni.navigateTo({
    url:to
  })
}
</script>

<template>
<view class="main">
  <view class="list" >
    <view v-for="(item,user) in arr" :key="user">
      <view class="cd" >
        <view class="icon-container">
          <image class="icon" :src ='item.icon'></image>
        </view>
        <view class="text-container">
          <text class="date">{{item.date}}</text>
          <text class="number">{{item.text1}}</text>
          <br>
          <text class="problem">{{item.text2}}</text>
        </view>
      </view>
      <view class="divider"></view>
    </view>
  </view>
</view>
</template>

<style scoped>
.divider{
  height: 1px;
  background-color: #e5e5e5;
  margin: 5px 5px;
  width: 100%;
}
.main {
  width: 100%;
  height: 100%;
  background: #F3F5F9;
}
.date{
  width: 159px;
  height: 21px;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
}
.number{
  margin-left: 150px;
  width: 82px;
  height: 21px;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
}
.problem{
  width: 82px;
  height: 21px;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
}
.cd{
  width: 400px;
  height: 70px;
  display: flex;
  flex-direction: row;
}
.icon{
  width: 14px;
  height: 14px;
}
.icon-container{
  margin-left: 12px;
}
.list{
  width: 100%;
  height: 90%;
  background: #FFFFFF;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}
</style>